<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎页</title>
    <style>
        body{
            background: url("img/背景.png")  no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }
        img{
            width: 300px;
            height: 300px;
        }
        @keyframes a {
            from{width:0;}
            to{width: 18em}
        }
        @keyframes c {
            from{width:0;}
            to{width: 9em}
        }
        @keyframes b {
            50%{border-color: transparent}
        }
        h1{
            font: bold 200% consoles,Monaco,monospace;
            border-right: 2px solid black;
            width: 18em;
            color: dodgerblue;
            margin: 20px 10px;
            white-space: nowrap;
            overflow: hidden;
            animation: a 6s steps(36,end),b 0.5s step-end infinite alternate;
        }
        .one{
            animation: c 4s steps(18,end),b 0.5s step-end infinite alternate;
            width:0;
            animation-delay: 6s;
            animation-fill-mode: forwards;

        }
        p {
            text-align: center;
            font-size: 40px;
        }
        .top{
            margin-top: 150px;
        }
        p a {
            width: 200px;
            height: 60px;
            display: block;
            margin: 0 auto;
            font-size: 30px;
            color: black;
            line-height: 60px;
            text-decoration: none;
            background-color: dodgerblue;
            border-radius: 10px;
        }

    </style>
</head>
<body>
<audio src="img/laojie.mp3" autoplay controls></audio>
<h1><b>人如果没有梦想，那和咸鱼有什么分别！</b></h1>
<h1 class="one"><b>代码改变世界！！！</b></h1>
<p class="top">欢迎访问尹智山的个人网站！</p>
<p><a href="主页/主页.html">进入主页</a></p>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (){
        document.querySelector('body').style.height = window.outerHeight - 100 + 'px';
    });
    window.onresize = function (){
        document.querySelector('body').style.height = window.outerHeight - 100 + 'px';
    };
    function creatFlake(){

        var f = document.createElement('img');
        f.src = 'img/枫叶.png';
        document.body.appendChild(f);
        f.style.position = 'absolute';
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;

        var left = Math.random()*w;
        var top = Math.random()*h;
        f.style.transform = "scale("+(Math.random()/3+0.2)+")"+"rotate("+360*Math.random() + "deg)";

        function down(){
            left+=Math.random()*2+0.1;
            top+=Math.random()*2+0.1;
            if (left>w+300){
                left=0;
            }
            if (top>h+300){
                top=0;
            }
            f.style.left=left + 'px';
            f.style.top=top + 'px';
        }
        setInterval(down,30);
    }
    for(var i=0;i<20;i++){
        creatFlake();
    }
</script>









